<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>选择器</title>
        <style>
            /*nth-child（n）
            an+b */
        li:nth-child(4n+1){
            background-color: cyan;
        }
        li:nth-child(4n+2){
            background-color: rgb(0, 255, 0);
        }
        li:nth-child(4n+3){
            background-color: rgb(136, 255, 0);
        }
        li:nth-child(4n+4){
            background-color: rgb(255, 251, 0);
        }
        li:only-child{/*只有一个子元素的列表
            */
            background-color: crimson;
        }
        </style>

    </head>
    <body>
            <ul>
              <li>一个列表</li>
            </ul>
            <ul>
              <li>一个列表</li>
            </ul>
        
        <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
        </ul>
    </body>
</html>